.filler {
    width: 100%;
    height: 100%;
    background: white;
}

.demo {
    box-sizing: border-box;
    border: 1px solid black;
}

.big {
    width: 100%;
    height: 300px;
}

.small {
    width: 50%;
    height: 300px;
}

.green {
    background: #5bf59c;
}

.red {
    background: red;
}

@media (min-width: 1025px) {
    #media .demo {
        padding: 30px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    #media .demo {
        padding: 15px;
    }
}

@media (max-width: 640px) {
    #media .demo {
        padding: 5px;
    }
}

.phone {
    padding: 5px;
}

.tablet {
    padding: 15px;
}

.desktop {
    padding: 30px;
}

.resizehandler1auto {
    background-color: var(--sapBackgroundColor);
}

.resizehandler2auto {
    display: flex;
}
